<template>
  <el-row :gutter="10" class="goods">
    <el-col :span="share ? 20 : editor ? 10 : 12">
      <div class="goods-info">
        <div class="goods-select" v-show="editor"><el-checkbox v-model="item.isSelect" size="large" true-value="Y"
            false-value="N" @change="bindItemSelect($event, item)" />
        </div>
        <div class="goods-image"><el-image style="width: 129px; height: 129px; background-color: #fff;" :src="item.img"
            fit="cover" /></div>
        <div class="goods-title">{{ item.name }}</div>
      </div>
    </el-col>
    <el-col :span="3" v-if="false">
      <div class="goods-type">商品类型</div>
    </el-col>
    <el-col v-if="!share" :span="4">
      <div class="goods-price">{{ $numberPriceDisplay(item.oneprice) }}</div>
    </el-col>
    <el-col :span="4">
      <div class="goods-number">
        <el-input-number v-if="editor" v-model="item.count" :min="1" :max="2000"
          @change="bindItemCountChange($event, item)" />
        <template v-else>
          <span>{{ item.count }}</span>
        </template>
      </div>
    </el-col>
    <el-col v-if="!share" :span="4">
      <div class="goods-count-price">{{ $numberPriceDisplay(computedPrice) }}</div>
    </el-col>
    <el-col v-if="editor" :span="2">
      <div class="goods-options">
        <el-button type="danger" icon="Delete" circle @click="handleDel(item)" />
      </div>
    </el-col>
  </el-row>
</template>

<script setup name="shoppingCartGoods">
import useShoppingCartStore from '@/components/webCustom/shoppingCart'
import Big from 'big.js'
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  editor: Boolean,
  share: Boolean,
  parentItem: {
    type: Object,
    default: () => ({})
  }
})
const shoppingCart = useShoppingCartStore()
const computedPrice = computed(() => {
  return new Big(props.item.oneprice || 0).times(new Big(props.item.count))
})
const bindItemCountChange = (count, item) => {
  shoppingCart.editGoodsCount({ count, skuId: item.skuid }).catch((err) => {
    console.log(err)
  })
}
const bindItemSelect = (isSelect, item) => {
  shoppingCart.selectGoods({ ids: item.id, type: isSelect === 'Y' ? '2' : '1' }).then(res => {
    shoppingCart.setItemInfo(props.parentItem)
  }).catch((err) => {
    item.isSelect = isSelect === 'Y' ? 'N' : 'Y'
    console.log(err)
  })
}
const handleDel = (item) => {
  shoppingCart.deleteGoods(item.id).catch((err) => {
    console.log(err)
  })
}
</script>

<style lang="scss" scoped>
.goods {
  background-color: #F8F8F8;

  &~.goods {
    margin-top: 18px;
  }

  &-info {
    display: flex;
    align-items: stretch;
    padding: 19px 0 19px 19px;
  }

  &-select {
    width: 22px;
    margin-right: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-image {
    width: 130px;
    border: 1px solid #EBEBEB;
    box-sizing: border-box;
    margin-right: 18px;
  }

  &-title {
    flex: 1;
    font-size: var(--jbc-font-size-large);
    color: var(--jbc-font-color);
    line-height: 28px;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    -webkit-line-clamp: 3;
  }

  &-type,
  &-price,
  &-number,
  &-count-price,
  &-options {
    text-align: center;
    padding: 19px 0;
  }

  &-number,
  &-price {
    font-size: 24px;
    color: var(--jbc-font-color);
    line-height: 31px;
  }

  &-count-price {
    font-weight: bold;
    font-size: 24px;
    color: var(--jbc-color);
    line-height: 31px;
  }

  :deep(.el-checkbox.el-checkbox--large) {
    --el-checkbox-checked-bg-color: var(--jbc-color);
    --el-checkbox-checked-input-border-color: var(--jbc-color);

    & .el-checkbox__input {
      .el-checkbox__inner {
        width: 22px;
        height: 22px;

        &:after {
          height: 10px;
          left: 8px;
          top: 3px;
          width: 4px;
        }
      }

      &.is-indeterminate .el-checkbox__inner {
        &:before {
          top: 10px;
        }
      }
    }
  }
}
</style>